import React from 'react'
import { useReducer } from 'react'

export default function UseReducerCom() {
  //创建 reducer 维护的状态
  //useReducer 返回值是一个数组  state 是状态变量,  dispatch 是一个函数用来修改状态变量的
  //                                函数『加工厂』   初始化状态值
  //                                state 状态用来接收状态值
  //                                action 是一个对象  {type: 'incre', payload: 10}   incre 新增 payload 负载
  //                                                  {type: 'decre', payload: 5}
  let [state, dispatch] = useReducer((state, action) => {
    //根据 action 中的 type 值, 对状态进行更新
    switch(action.type){
      case 'incre':
        //新的计数
        let newCount1 = state.count + action.payload;
        //返回新的状态值
        return {
          count: newCount1
        }
      case 'decre':
        //计算新的值
        let newCount2 = state.count - action.payload;
        //返回新的状态值
        return {
          count: newCount2
        }
      default: 
        throw new Error('操作类型 不存在~~');
    }
  }, {count: 10, msg: ''});
  
  return (
    <div style={{padding: '50px'}}>
      <div>{state.count}</div>
      <button onClick={() => {
        //dispatch 分发 任务
        dispatch({type: 'incre', payload: 1});
      }}>新增</button>
    </div>
  )
}
